<template>
    <div>
        useRefDebounceHistory
        <p>counter: {{ counter }}</p>
        <button @click="counter++">add</button>
        <p>history{{ history }}</p>
        <button @click="undo">undo</button>
        <button @click="redo">redo</button>
    </div>
</template>

<script setup>
import {useDebouncedRefHistory} from '@vueuse/core'
import {ref} from 'vue'

const counter = ref(1)

const {history, undo, redo} = useDebouncedRefHistory(counter, {deep: true, debounce: 1000})
</script>